<template>
  <div :class="!darkSkin ? 'smallPagination' : 'smallPagination dark'">
    <ul>
      <li>&lt;</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>&gt;</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "SmallPagination",
  computed: {
    darkSkin() {
      return this.$store.state.darkSkin;
    },
  },
};
</script>

<style scoped>
* {
  list-style: none;
}
.smallPagination {
  display: flex;
  margin: 30px auto;
  width: 285px;
  height: 80px;
  align-items: center;
  transition: all 0.8s ease;
}
.smallPagination ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.smallPagination li {
  width: 30px;
  height: 100%;
  text-align: center;
  font-size: 1rem;
}
.smallPagination.active {
  color: #ff3f34;
  font-weight: 600;
}
.smallPagination.dark li:hover {
  cursor: pointer;
  color: #00d0ff;
}
.smallPagination li:hover {
  cursor: pointer;
  color: #ff3f34;
}
</style>